<template>
  <div class="attendance-record">
    <div class="content-container">
      <!-- 统计卡片 -->
      <div class="statistics-cards">
        <div class="card-row">
          <div class="stat-column" v-for="(card, index) in statisticsCards" :key="index">
            <el-card shadow="hover" :class="['stat-card', card.type]">
              <div class="stat-content">
                <div class="stat-icon">
                  <el-icon><component :is="card.icon" /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-label">{{ card.label }}</div>
                  <div class="stat-number">{{ getStatValue(card.key) }}</div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <!-- 考勤记录表格 -->
      <el-card class="record-card">
        <template #header>
          <div class="card-header">
            <span class="header-title">考勤记录</span>
            <el-button type="primary" @click="fetchRecordList" size="small" class="refresh-btn">
              <el-icon class="refresh-icon"><Refresh /></el-icon>刷新数据
            </el-button>
          </div>
        </template>

        <el-table 
          :data="tableData" 
          border 
          style="width: 100%" 
          v-loading="loading"
          class="record-table"
          :header-cell-style="{
            background: '#f8faff',
            color: '#303133',
            fontWeight: '600',
            fontSize: '14px'
          }"
        >
          <el-table-column prop="checkTimeStr" label="打卡时间" width="180" />
          <el-table-column prop="checkTypeDesc" label="打卡类型" width="120">
            <template #default="scope">
              <el-tag :type="getCheckTypeTag(scope.row.checkType)" effect="light">
                {{ scope.row.checkTypeDesc }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="checkMethodDesc" label="打卡方式" width="120" />
          <el-table-column prop="statusDesc" label="状态" width="120">
            <template #default="scope">
              <el-tag :type="getStatusTag(scope.row.status)" effect="light">
                {{ scope.row.statusDesc }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="reason" label="原因" show-overflow-tooltip />
          <el-table-column prop="remark" label="备注" show-overflow-tooltip />
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            class="custom-pagination"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getRecordList } from '@/api/employee/record'
import { 
  Calendar, 
  Timer, 
  AlarmClock, 
  WarningFilled, 
  MoonNight, 
  Refresh 
} from '@element-plus/icons-vue'

// 搜索表单
const searchForm = reactive({
  dateRange: [],
})

// 统计数据
const statistics = ref({
  attendanceDays: 0,
  lateTimes: 0,
  earlyLeaveTimes: 0,
  absentDays: 0,
  overtimeTimes: 0
})

// 统计卡片配置
const statisticsCards = [
  { label: '出勤天数', key: 'attendanceDays', icon: 'Calendar', type: '' },
  { label: '迟到次数', key: 'lateTimes', icon: 'Timer', type: 'warning' },
  { label: '早退次数', key: 'earlyLeaveTimes', icon: 'AlarmClock', type: 'warning' },
  { label: '缺勤天数', key: 'absentDays', icon: 'WarningFilled', type: 'danger' },
  { label: '加班次数', key: 'overtimeTimes', icon: 'MoonNight', type: 'success' }
]

// 获取统计数据值
const getStatValue = (key) => {
  return statistics.value[key] || 0
}

// 加载状态
const loading = ref(false)

// 表格数据
const tableData = ref([])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 获取打卡类型对应的标签类型
const getCheckTypeTag = (type) => {
  const typeMap = {
    1: 'warning', // 上班打卡
    2: 'success', // 下班打卡
  }
  return typeMap[type] || 'info'
}

// 获取状态对应的标签类型
const getStatusTag = (status) => {
  const statusMap = {
    1: 'success', // 正常
    2: 'warning', // 迟到
    3: 'warning', // 早退
    4: 'danger', // 缺勤
  }
  return statusMap[status] || 'info'
}

// 获取考勤记录列表
const fetchRecordList = async () => {
  loading.value = true
  try {
    const employeeNo = localStorage.getItem('employeeNo')
    if (!employeeNo) {
      ElMessage.error('获取员工编号失败')
      return
    }
    const res = await getRecordList(employeeNo, currentPage.value, pageSize.value)
    if (res.data) {
      // 更新表格数据
      tableData.value = res.data.records || []
      total.value = res.data.total || 0
      statistics.value = {
        attendanceDays: res.data.attendanceDays || 0,
        lateTimes: res.data.lateTimes || 0,
        earlyLeaveTimes: res.data.earlyLeaveTimes || 0,
        absentDays: res.data.absentDays || 0,
        overtimeTimes: res.data.overtimeTimes || 0
      }
    }
  } catch (error) {
    console.error('获取考勤记录失败：', error)
    ElMessage.error('获取考勤记录失败')
  } finally {
    loading.value = false
  }
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchRecordList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchRecordList()
}

// 页面加载时获取数据
onMounted(() => {
  fetchRecordList()
})
</script>

<style scoped lang="scss">
.attendance-record {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  
  .content-container {
    width: 100%;
  }

  .statistics-cards {
    margin-bottom: 24px;
    width: 100%;
    
    .card-row {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      gap: 20px;
    }
    
    .stat-column {
      flex: 1;
    }

    .stat-card {
      height: 120px;
      transition: all 0.3s;
      border: none;
      border-radius: 12px;
      overflow: visible;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
      }

      .stat-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 15px;

        .stat-icon {
          flex-shrink: 0;
          width: 50px;
          height: 50px;
          border-radius: 12px;
          background: rgba(24, 144, 255, 0.08);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
          transition: all 0.3s;

          .el-icon {
            font-size: 24px;
            color: #1890ff;
          }
        }

        .stat-info {
          text-align: left;
          overflow: visible;
          white-space: nowrap;

          .stat-label {
            font-size: 14px;
            color: #606266;
            margin-bottom: 6px;
            font-weight: 500;
          }

          .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #1890ff;
            line-height: 1.2;
          }
        }
      }

      &.warning {
        .stat-icon {
          background: rgba(250, 173, 20, 0.08);
          .el-icon {
            color: #faad14;
          }
        }
        .stat-number {
          color: #faad14 !important;
        }
      }

      &.danger {
        .stat-icon {
          background: rgba(245, 34, 45, 0.08);
          .el-icon {
            color: #f5222d;
          }
        }
        .stat-number {
          color: #f5222d !important;
        }
      }
      
      &.success {
        .stat-icon {
          background: rgba(82, 196, 26, 0.08);
          .el-icon {
            color: #52c41a;
          }
        }
        .stat-number {
          color: #52c41a !important;
        }
      }
    }
  }

  .record-card {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    overflow: hidden;
    margin: 0;
    
    &:hover {
      box-shadow: 0 12px 32px rgba(24, 144, 255, 0.1);
      transform: translateY(-2px);
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #f0f0f0;

      .header-title {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
        position: relative;
        padding-left: 12px;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 18px;
          background: #1890ff;
          border-radius: 2px;
        }
      }
      
      .refresh-btn {
        background: linear-gradient(135deg, #1890ff, #36a6ff);
        border: none;
        border-radius: 20px;
        padding: 8px 16px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
        
        .refresh-icon {
          margin-right: 4px;
          transition: all 0.3s ease;
        }
        
        &:hover {
          background: linear-gradient(135deg, #40a9ff, #5cbbff);
          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
          transform: translateY(-2px);
          
          .refresh-icon {
            transform: rotate(180deg);
          }
        }
        
        &:active {
          background: linear-gradient(135deg, #096dd9, #1890ff);
          transform: translateY(0);
        }
      }
    }

    .record-table {
      margin: 16px 0;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
      
      :deep(.el-table__row) {
        transition: all 0.3s;
        
        &:hover {
          background-color: #f8faff !important;
        }
      }
      
      :deep(.el-table__cell) {
        padding: 10px 0;
      }
      
      :deep(th) {
        font-weight: 600;
      }

      :deep(.el-tag) {
        padding: 0 10px;
        height: 28px;
        line-height: 28px;
        border-radius: 4px;
        font-weight: 500;
        font-size: 12px;
        
        &.el-tag--success {
          background-color: rgba(82, 196, 26, 0.08);
          border-color: rgba(82, 196, 26, 0.2);
          color: #52c41a;
          
          &.el-tag--dark {
            background-color: rgba(82, 196, 26, 0.8);
            border-color: rgba(82, 196, 26, 0.8);
            color: #fff;
          }
          
          &.el-tag--light {
            background-color: rgba(82, 196, 26, 0.08);
            border-color: rgba(82, 196, 26, 0.2);
            color: #52c41a;
          }
        }
        
        &.el-tag--info {
          background-color: rgba(144, 147, 153, 0.08);
          border-color: rgba(144, 147, 153, 0.2);
          color: #909399;
          
          &.el-tag--dark {
            background-color: rgba(144, 147, 153, 0.8);
            border-color: rgba(144, 147, 153, 0.8);
            color: #fff;
          }
          
          &.el-tag--light {
            background-color: rgba(144, 147, 153, 0.08);
            border-color: rgba(144, 147, 153, 0.2);
            color: #909399;
          }
        }
        
        &.el-tag--warning {
          background-color: rgba(250, 173, 20, 0.08);
          border-color: rgba(250, 173, 20, 0.2);
          color: #faad14;
          
          &.el-tag--dark {
            background-color: rgba(250, 173, 20, 0.8);
            border-color: rgba(250, 173, 20, 0.8);
            color: #fff;
          }
          
          &.el-tag--light {
            background-color: rgba(250, 173, 20, 0.08);
            border-color: rgba(250, 173, 20, 0.2);
            color: #faad14;
          }
        }
        
        &.el-tag--danger {
          background-color: rgba(245, 34, 45, 0.08);
          border-color: rgba(245, 34, 45, 0.2);
          color: #f5222d;
          
          &.el-tag--dark {
            background-color: rgba(245, 34, 45, 0.8);
            border-color: rgba(245, 34, 45, 0.8);
            color: #fff;
          }
          
          &.el-tag--light {
            background-color: rgba(245, 34, 45, 0.08);
            border-color: rgba(245, 34, 45, 0.2);
            color: #f5222d;
          }
        }
      }
    }
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
    
    :deep(.custom-pagination) {
      padding: 0;
      
      .el-pagination__total {
        margin-right: 16px;
        color: #606266;
        font-weight: 500;
      }
      
      .el-pagination__sizes {
        margin-right: 16px;
        
        .el-select .el-input {
          width: 110px;
          
          .el-input__wrapper {
            background-color: #f5f7fa;
            border-radius: 20px;
          }
        }
      }
      
      button {
        background-color: #f5f7fa;
        border-radius: 4px;
        margin: 0 3px;
        color: #606266;
        transition: all 0.2s ease;
        
        &:hover {
          color: #1890ff;
          background-color: #e6f7ff;
        }
        
        &:disabled {
          color: #c0c4cc;
        }
      }
      
      .btn-prev, .btn-next {
        padding: 0 8px;
        
        &:hover {
          background-color: #e6f7ff;
        }
      }
      
      .el-pager {
        li {
          background-color: #f5f7fa;
          border-radius: 4px;
          margin: 0 3px;
          color: #606266;
          font-weight: 500;
          min-width: 32px;
          transition: all 0.2s ease;
          
          &:hover {
            color: #1890ff;
            background-color: #e6f7ff;
          }
          
          &.is-active {
            background-color: #1890ff;
            color: #fff;
            font-weight: 600;
            box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
            
            &:hover {
              background-color: #40a9ff;
            }
          }
        }
      }
      
      .el-pagination__jump {
        margin-left: 16px;
        color: #606266;
        
        .el-input__wrapper {
          background-color: #f5f7fa;
          border-radius: 4px;
        }
      }
    }
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .attendance-record {
    padding: 10px;

    .statistics-cards {
      .card-row {
        flex-wrap: wrap;
      }
      
      .el-col {
        margin-bottom: 16px;
      }
    }
  }
}
</style>
